<template>
  <div class="test">
    <van-tabs class="custom-tab"  swipeable :active="active" v-on:change="onChange">
  <van-tab title="首页"></van-tab>
  <van-tab title="提问">内容 2</van-tab>
  <van-tab title="建议">内容 3</van-tab>
  <van-tab title="分享">内容 4</van-tab>
    <van-tab title="讨论">内容 5</van-tab>
  <van-tab title="公告">内容 6</van-tab>

</van-tabs>
    <tab-bar :active="0"></tab-bar>
  </div>
</template>

<script>
import Icon from '@/components/icon/index'
import TabBar from '@/components/tabbar/vant'
export default {
  name: 'index',
  components: {
    'v-icon': Icon,
    TabBar
  },
  data () {
    return {
      active: 0
    }
  },
  methods: {
    onChange (event) {
      this.active = event.mp.detail.index
      wx.showToast({
        title: `切换到标签 ${event.mp.detail.index}${event.mp.detail.name}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$color: red;
.test {
  color: $color;
}
.icon {
  width: 40px;
  height: 40px;
}
//自定义主题
.custom-tab {
  --tabs-bottom-bar-color: #02d199;
  --tab-active-text-color: #02d199;
  --tab-text-color: #666666;
}
</style>
